<template>
	<view class="expert">
		<view class="nav_bar" style="background-color: #E6E9F2;">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$native.backAction()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<scroll-view scroll-x="true" class="card_scroll">
			<view class="card_list flex_center">
				<!-- 达人卡片 -->
				<view class="card_box" v-if="is_eredar != -1">
					<view class="card">
						<view class="header flex_center">
							<view class="left">
								<image :src="eredar_info.avatar" mode="aspectFill"></image>
							</view>
							<view class="right flex_c">
								<view class="nickname">{{ eredar_info.nickname || '' }}</view>
								<view class="tag flex_center">
									<image src="/static/expert/tags.png"></image>
									<text>{{ eredar_info.eredar_domain || '达人' }}</text>
								</view>
							</view>
						</view>

						<view class="data_list flex_r_between">
							<view class="item">
								<text class="tit">权重分</text>
								<view class="text">{{ eredar_info.account_score || 0 }}</view>
							</view>

							<view class="item">
								<text class="tit">作品数</text>
								<view class="text">{{ eredar_info.article_num || 0 }}</view>
							</view>

							<view class="item2" @click="show_eredar = !show_eredar">
								<text class="tit">所有达人成交额(元)</text>
								<view class="icon_item flex_center">
									<view class="text">{{ eredar_info.price || 0 }}</view>
									<view class="icon flex_r_around">
										<u-icon :name="show_eredar ? 'arrow-up' : 'arrow-down'" color="#FFF"
											size="12rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>

						<view class="leave" v-if="eredar_info.id != user_info.id" @click="showleave = true">解绑</view>

					</view>

					<view class="date flex_r_between" v-if="show_eredar">
						<view class="item">
							<text class="tit">当日(元)</text>
							<view class="text">{{ eredar_info.today_price || 0 }}</view>
						</view>
						<view class="item">
							<text class="tit">本周(元)</text>
							<view class="text">{{ eredar_info.week_price || 0 }}</view>
						</view>
						<view class="item">
							<text class="tit">本月(元)</text>
							<view class="text">{{ eredar_info.month_price || 0 }}</view>
						</view>
					</view>
				</view>

				<!-- 有团队 自己 -->
				<view class="card_box" v-if="is_eredar != -1">
					<view class="card">
						<view class="header flex_center">
							<view class="left">
								<image :src="user_info.avatar" mode="aspectFill"></image>
							</view>
							<view class="right flex_c">
								<view class="nickname">{{ user_info.nickname || '' }}</view>
								<view class="tag flex_center" v-show="user_info.is_eredar == 1">
									<image src="/static/expert/tags.png"></image>
									<text>{{ user_info.eredar_domain || '达人' }}</text>
								</view>
							</view>
						</view>

						<view class="data_list flex_r_between">
							<view class="item">
								<text class="tit">权重分</text>
								<view class="text">{{ user_info.account_score || 0 }}</view>
							</view>

							<view class="item">
								<text class="tit">作品数</text>
								<view class="text">{{ user_info.article_num || 0 }}</view>
							</view>

							<view class="item2" @click="show_user = !show_user">
								<text class="tit">本人成交额(元)</text>
								<view class="icon_item flex_center">
									<view class="text">{{ user_info.price || 0 }}</view>
									<view class="icon flex_r_around">
										<u-icon :name="show_user ? 'arrow-up' : 'arrow-down'" color="#FFF"
											size="12rpx"></u-icon>
									</view>
								</view>
							</view>
						</view>

					</view>

					<view class="date flex_r_between" v-if="show_user">
						<view class="item">
							<text class="tit">当日(元)</text>
							<view class="text">{{ user_info.today_price || 0 }}</view>
						</view>
						<view class="item">
							<text class="tit">本周(元)</text>
							<view class="text">{{ user_info.week_price || 0 }}</view>
						</view>
						<view class="item">
							<text class="tit">本月(元)</text>
							<view class="text">{{ user_info.month_price || 0 }}</view>
						</view>
					</view>
				</view>

				<!-- 无团队自己 -->
				<view class="card_box" v-if="is_eredar == -1">
					<view class="card">
						<view class="header flex_center">
							<view class="left">
								<image :src="user_info.avatar" mode="aspectFill"></image>
							</view>
							<view class="right">
								<view class="nickname">{{user_info.nickname || ''}}</view>
							</view>
						</view>

						<view class="data_list flex_r_between">
							<view class="item">
								<text class="tit">权重分</text>
								<view class="text">{{user_info.account_score || 0}}</view>
							</view>

							<view class="item">
								<text class="tit">作品数</text>
								<view class="text">{{user_info.article_num || 0}}</view>
							</view>

						</view>

					</view>
				</view>
			</view>
		</scroll-view>

		<view class="tab flex_center">
			<view class="item flex_c" @click="onTab(1)" :id="tab == 1 ? 'select' : ''">
				<text>孵化说明</text>
				<i v-if="tab == 1"></i>
			</view>

			<view class="item flex_c" @click="onTab(2)" :id="tab == 2 ? 'select' : ''" v-if="is_eredar != -1">
				<text>成员</text>
				<i v-if="tab == 2"></i>
			</view>

			<view class="item flex_c" @click="onTab(3)" :id="tab == 3 ? 'select' : ''">
				<text>带货榜</text>
				<i v-if="tab == 3"></i>
			</view>
		</view>

		<view class="container">
			<view class="rich" v-if="tab == 1">
				<view>
					1.超圈是以圈子文化为基础的短视频平台，为大家提供优质短视频内容，本平台鼓励有短视频创作基础的达人孵化不同领域的优质短视频博主和达人。
				</view>
				<view>
					2.为鼓励和扶持孵化优质博主和达人，孵化满足如下条件超圈提供现金奖励。具体条件和奖金如下：
				</view>
				<view>
					要求：
				</view>
				<view>
					（1）被孵化者每周创作一条优质短视频内容。
				</view>
				<view>
					（2）被孵化者必须在5个月内内容质量分达到500分以上。
				</view>
				<view>
					（3）被孵化着一年内内容质量分，必须在650分以上，且粉丝数量大于5万。在垂直领域内有一定的短视频数量。否则直接取消孵化资格。
				</view>
				<view>
					（4）365天内，必须孵化成功20名合格的达人，每月至少两名。
				</view>
				<br />
				<view>
					奖励:
				</view>
				<view>
					（1）自孵化开始，奖励被孵化着带货佣金的2.5%（2.5%的费用是超圈平台奖励），孵化成功则奖励5%（有效期两年）。
				</view>
				<view>
					（2）成为达人后才可领取奖励。
				</view>

			</view>

			<view class="list" v-if="tab == 2">
				<empty v-if="!list.length && total == 0"></empty>
				<view class="loading" v-if="!list.length && total == 1">
					<HevuLoading type="loading4" :opacity="0" loadingText="加载中..." text-color="#FD2A53"
						loadingIconColor="#FD2A53" />
				</view>
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="header flex_r_between">
						<view class="left flex_center" @click="$native.toUser(item.provider_id)">
							<image :src="item.avatar" mode="aspectFill"></image>
							<text>{{item.nickname || '未知用户'}}</text>
						</view>
						<view class="right" @click="onDetele(item)">
							<u-icon name="close" bold size="28rpx" color="#666666"></u-icon>
						</view>
					</view>

					<view class="data flex_r_between">
						<view class="data_item">
							<text class="tit">权重分</text>
							<view class="text">{{ item.account_score || 0 }}</view>
						</view>
						<view class="data_item">
							<text class="tit">作品数</text>
							<view class="text">{{ item.article_num || 0 }}</view>
						</view>
						<view class="data_item">
							<text class="tit">带货成交金额(元)</text>
							<view class="text">{{ item.price || 0 }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="table_box" v-if="tab == 3">
				<view class="table">
					<view class="title flex_center">
						<view class="thw1">排名</view>
						<view class="thw2">达人信息</view>
						<view class="th">订单量(单)</view>
						<view class="th">成交额(元)</view>
					</view>
					<empty v-if="!sell.length && selltotal == 0"></empty>
					<view class="loading" v-if="!sell.length && selltotal == 1">
						<HevuLoading type="loading4" :opacity="0" loadingText="加载中..." text-color="#FD2A53"
							loadingIconColor="#FD2A53" />
					</view>
					<view class="tr flex_center" v-for="(item,index) in sell" :key="index">
						<view class="thw1">{{index + 1}}</view>
						<view class="thw2 flex_center" @click="$native.toUser(item.provider_id)">
							<image :src="item.avatar" mode="aspectFill"></image>
							<text class="hidden">{{item.nickname || ''}}</text>
						</view>
						<view class="td">{{ item.order_num || 0 }}</view>
						<view class="td">{{ item.order_price || '0.00' }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="invite flex_r_around" @touchmove="onTouchMove" @touchend="onTouchEnd" v-if="is_eredar != -1"
			:style="`top: ${top}px;left: ${left}px;`"
			@click="$util.toUrl(`/pages/expert/invite?eredar_user_id=${eredar_info.id}`)">
			<view class="flex_c">
				<u-icon name="plus" size="40rpx" color="#C7D2E9" bold></u-icon>
				<text>邀请</text>
			</view>
		</view>

		<u-modal :show="showmodel" title="提示" content="是否确认删除该成员" :showCancelButton="true" confirmColor="#FD2A53"
			confirmText="确认" cancelText="取消" :asyncClose="true" @confirm="confirm" @close="showmodel = false"
			@cancel="showmodel = false"></u-modal>

		<u-modal :show="showleave" title="提示" content="是否确认解绑" :showCancelButton="true" confirmColor="#FD2A53"
			confirmText="确认" cancelText="取消" :asyncClose="true" @confirm="leaveTeam" @close="showleave = false"
			@cancel="showleave = false"></u-modal>

	</view>
</template>

<script>
	import navBar from '@/compentents/navBar/navBar.vue'
	import empty from '@/compentents/empty/empty.vue'
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	export default {
		components: {
			navBar,
			empty,
			HevuLoading,
		},
		data() {
			return {
				tab: 1,

				// -1 没有团队 0不是达人，其他是
				is_eredar: -1,
				user_info: {},
				eredar_info: {},


				// 团队成员
				list: [],
				page: 1,
				total: 1,

				// 带货
				sell: [],
				sellpage: 1,
				selltotal: 1,

				show_user: false,
				show_eredar: false,

				showmodel: false,
				member_id: 0,

				showleave: false,

				top: 100,
				left: 16,
				w: 0,
				h: 0,
				nav_h: 0,
				page_w: 0,
				page_h: 0,
			}
		},
		methods: {
			getInviewBtnInfo() {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select(".invite").boundingClientRect((data) => {
						this.w = data.width;
						this.h = data.height;
					}).exec();

					query.select(".nav_bar").boundingClientRect((data) => {
						this.nav_h = data.height;
					}).exec();


					const res = uni.getSystemInfo({
						success: res => {
							this.page_w = res.windowWidth;
							this.page_h = res.windowHeight;
							this.top = this.page_h / 2 - 10 - this.h;
							this.left = this.page_w - 10 - this.w;
						}
					});
				});
			},
			onTouchMove(e) {
				this.left = e.changedTouches[0].clientX - this.w / 2;
				this.top = e.changedTouches[0].clientY - this.h / 2;
			},
			onTouchEnd(e) {
				if (this.top < (this.nav_h + 10)) {
					this.top = this.nav_h + 10;
				}

				if (this.top > (this.page_h - 10 - this.h)) {
					this.top = this.page_h - 10 - this.h;
				}

				if (this.left < 10) {
					this.left = 10;
				}

				if (this.left > (this.page_w - 10 - this.w)) {
					this.left = this.page_w - 10 - this.w;
				}

			},
			onTab(e) {
				if (this.tab == e) {
					return;
				}
				this.tab = e;
				if (this.tab == 2) {
					this.list = [];
					this.page = 1;
					this.total = 1;
					this.getTeamMember();
				}

				if (this.tab == 3) {
					this.sell = [];
					this.selltotal = 1;
					this.sellpage = 1;
					this.sellGoodsList();
				}
			},

			getUserInfo() {
				this.$get('/v2.eredar/getUserInfo').then(res => {
					this.is_eredar = res.data.is_eredar;
					this.user_info = res.data.user_info;
					this.eredar_info = res.data.eredar_info;
					if (this.is_eredar != -1) {
						this.getInviewBtnInfo();
					}
				});
			},

			// 获取团队成员
			getTeamMember() {
				this.$get('/v2.eredar/getTeamMember', {
					page: this.page,
				}).then(res => {
					if (res.data.data) {
						this.total = res.data.total;
						this.list.push(...res.data.data);
					}
				})
			},


			sellGoodsList() {
				this.$get('/v2.eredar/sellGoodsList', {
					page: this.sellpage
				}).then(res => {
					this.selltotal = res.data.total;
					this.sell.push(...res.data.data);
				});
			},

			onDetele(item) {
				this.member_id = item.id;
				this.showmodel = true;
			},

			confirm() {
				this.$get('/v2.eredar/kickMember', {
					member_id: this.member_id
				}).then(res => {
					this.list = [];
					this.page = 1;
					this.total = 1;
					this.getTeamMember();
					this.showmodel = false;
				});
			},

			leaveTeam() {
				this.$get('/v2.eredar/leaveTeam', {
					eredar_user_id: this.eredar_info.id
				}).then(res => {
					this.$util.msg('解约成功');
					this.getUserInfo();
					this.showleave = false;
				});
			},
		},

		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.getUserInfo();
		},

		onReachBottom() {
			if (this.tab == 1) {

			}

			if (this.tab == 2) {
				if (this.total > this.list.length) {
					this.page++;
					this.getTeamMember();
				}
			}

			if (this.tab == 3) {
				if (this.selltotal > this.sell.length) {
					this.sellpage++;
					this.sellGoodsList();
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.expert {
		width: 100vw;
		overflow: hidden;
	}

	.area {
		position: fixed;
		height: 300rpx;
		width: 128rpx;
		right: 24rpx;
		top: 50%;
		z-index: 0;
	}

	.expert {
		min-height: 100vh;
		background: #FFF;
	}

	.card_scroll {
		padding-bottom: 18rpx;
		background: linear-gradient(180deg, #E6E9F2 0%, #F3F3F3 100%);
	}

	.card_list {
		flex-wrap: nowrap;
		margin: 0 24rpx;
		align-items: flex-start;

		.card_box {
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx #E8EBF2;
			border-radius: 32rpx;
			overflow: hidden;
			flex-shrink: 0;
			width: 686rpx;
			margin-right: 12rpx;

			.date {
				padding: 16rpx 24rpx;

				.item {
					flex: 1;

					text {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
					}

					view {
						font-size: 26rpx;
						color: #131313;
						line-height: 36rpx;
					}
				}
			}
		}

		.card {
			padding: 24rpx;
			background: url(https://qiniu-cdn.maeiyun.com//h5static/expert/expert_card_bg.png) 0 0 no-repeat;
			background-size: 100%;
			width: 686rpx;
			height: 284rpx;
			position: relative;

			.leave {
				position: absolute;
				right: 32rpx;
				top: 32rpx;
				width: 98rpx;
				height: 40rpx;
				background: #0096AB;
				border-radius: 20rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 40rpx;
				text-align: center;
			}

			.header {
				margin-bottom: 30rpx;

				.left {
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
					overflow: hidden;
					margin-right: 16rpx;

					image {
						width: 112rpx;
						height: 112rpx;
					}
				}

				.right {
					align-items: flex-start;

					.nickname {
						font-weight: 600;
						font-size: 32rpx;
						color: #131313;
						line-height: 44rpx;
					}

					.tag {
						background: linear-gradient(122deg, #DF3D03 0%, #FFB34B 100%);
						border-radius: 24rpx;
						margin-top: 8rpx;
						padding: 2rpx 12rpx 2rpx 0;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 4rpx;
						}

						text {
							font-weight: 600;
							font-size: 24rpx;
							line-height: 32rpx;
							color: #FFFFFF;
						}
					}
				}
			}

			.data_list {
				.item {
					flex: 1;

					.tit {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 8rpx;
					}

					.text {
						font-weight: 600;
						font-size: 30rpx;
						color: #131313;
						line-height: 42rpx;
					}

					.icon_item {
						.text {
							font-weight: 600;
							font-size: 30rpx;
							color: #131313;
							line-height: 42rpx;
							margin-right: 16rpx;
						}

						.icon {
							width: 24rpx;
							height: 24rpx;
							background: #00C7E2;
							border-radius: 12rpx;
						}
					}
				}

				.item2 {
					width: 42%;

					.tit {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-bottom: 8rpx;
					}

					.text {
						font-weight: 600;
						font-size: 30rpx;
						color: #131313;
						line-height: 42rpx;
					}

					.icon_item {
						.text {
							font-weight: 600;
							font-size: 30rpx;
							color: #131313;
							line-height: 42rpx;
							margin-right: 16rpx;
						}

						.icon {
							width: 24rpx;
							height: 24rpx;
							background: #00C7E2;
							border-radius: 12rpx;
						}
					}
				}
			}

		}
	}

	.tab {
		height: 86rpx;
		// border-radius: 24rpx 24rpx 0rpx 0rpx;
		align-items: flex-end;
		background: #F3F3F3;

		.item {
			flex: 1;
			height: 72rpx;
			font-weight: 600;
			font-size: 28rpx;
			color: #666666;
			line-height: 72rpx;
			text-align: center;
			transition: 0.2s;
			background: #EBEEF4;

			i {
				width: 32rpx;
				height: 8rpx;
				background: #FD2A53;
				border-radius: 4rpx;
			}
		}

		#select {
			background: #FFF;
			position: relative;
			height: 86rpx;
			// width: 200rpx;
			// flex: 0;
			// text {
			// 	width: 160rpx;
			// }
			// margin: 0 40rpx;
			// border-radius: 40rpx 40rpx 0rpx 0rpx;
		}



	}

	.container {
		background: #FFF;

		.rich {
			padding: 56rpx 48rpx;

			view {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				line-height: 48rpx;
			}
		}

		.list {
			padding: 32rpx;

			.item {
				background: #F8F8F8;
				border-radius: 24rpx;
				border: 2rpx solid #EAEEF5;
				margin-bottom: 20rpx;
				padding: 24rpx 40rpx;

				.header {
					.left {
						image {
							width: 72rpx;
							height: 72rpx;
							background: #ECECF4;
							border-radius: 36rpx;
							margin-right: 12rpx;
						}

						text {
							font-weight: 600;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}

					}

					.right {
						padding: 10rpx;
					}
				}

				.data {
					margin-top: 24rpx;

					.data_item {
						text {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
						}

						view {
							font-weight: 600;
							font-size: 30rpx;
							color: #131313;
							line-height: 42rpx;
							margin-top: 4rpx;
						}
					}
				}
			}
		}

		.table_box {
			padding: 48rpx 24rpx;

			.table {
				border-radius: 24rpx;
				border: 2rpx solid #EAEEF5;
				overflow: hidden;

				.title {
					width: 702rpx;
					height: 80rpx;
					background: #F8F8F8;
					border-bottom: 2rpx solid #EAEEF5;

					.th {
						flex: 1;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
					}

					.thw1 {
						width: 100rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
					}

					.thw2 {
						width: 240rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
					}
				}

				.tr {
					height: 96rpx;
					background: #FFFFFF;
					border-bottom: 2rpx solid #EAEEF5;

					.td {
						flex: 1;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
					}

					.thw1 {
						width: 100rpx;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						text-align: center;
					}

					.thw2 {
						width: 240rpx;

						image {
							width: 64rpx;
							height: 64rpx;
							background: #D8D8D8;
							border-radius: 32rpx;
							margin-right: 16rpx;
						}

						text {
							font-weight: 600;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
						}
					}
				}
			}
		}
	}

	.invite {
		width: 128rpx;
		height: 128rpx;
		border-radius: 64rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 22rpx 0rpx rgba(124, 134, 165, 0.6);
		position: fixed;
		// right: 24rpx;
		// top: 50%;
		z-index: 99;

		text {
			font-weight: 600;
			font-size: 28rpx;
			color: #333333;
			line-height: 28rpx;
		}
	}

	#select:before {
		content: '';
		position: absolute;
		top: 0;
		left: -45px;
		height: 100%;
		width: 50px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z');
	}

	#select:after {
		content: '';
		position: absolute;
		top: 0;
		right: -45px;
		height: 100%;
		width: 50px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');
	}

	.popup {
		width: 680rpx;
		height: 60vh;
		overflow: hidden;
		background: #FFF;
		border-radius: 24rpx;
	}
</style>